<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE HTML>
<html>
<head>
<title>表单中的表格</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/bui-min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/page-min.css" rel="stylesheet" type="text/css" />
<!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
<link href="assets/css/prettify.css" rel="stylesheet" type="text/css" />
<style type="text/css">
code {
	padding: 0px 4px;
	color: #d14;
	background-color: #f7f7f9;
	border: 1px solid #e1e1e8;
}
</style>
</head>
<body>

	<div class="container">
		<form id="J_Form" class="form-horizontal">
			<!--    -->
			<h3>基本信息</h3>
			<div class="row">
				<div class="control-group span12">
					<label class="control-label"><s>*</s>登录名：</label>
					<div class="controls">
						<input name="sname" type="text" class="control-text"
							data-rules="{required:true}">
					</div>
				</div>
				<div class="control-group span12">
					<label class="control-label"><s>*</s>密码：</label>
					<div class="controls">
						<input name="sid" type="text" class="control-text"
							data-rules="{required:true}">
					</div>
				</div>
			</div>

			<hr />
			<div class="row">
				<div class="form-actions offset3">
					<button type="submit" class="button button-primary">保存</button>
					<button type="reset" class="button">重置</button>
				</div>
			</div>
		</form>
	</div>
	<script type="text/javascript" src="assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="assets/js/bui-min.js"></script>

	<script type="text/javascript" src="assets/js/config-min.js"></script>
	<script type="text/javascript">
		BUI.use('common/page');
	</script>
	<!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
	<script type="text/javascript" src="assets/js/prettify.js"></script>
	<script type="text/javascript">
		$(function() {
			prettyPrint();
		});
	</script>
	<script type="text/javascript">
		BUI.use([ 'bui/grid', 'bui/data', 'bui/form' ], function(Grid, Data,
				Form) {

			var columns = [ {
				title : '学校名称',
				dataIndex : 'school',
				editor : {
					xtype : 'text',
					rules : {
						required : true
					}
				}
			}, {
				title : '入学日期',
				dataIndex : 'enter',
				editor : {
					xtype : 'date',
					rules : {
						required : true
					}
				},
				renderer : Grid.Format.dateRenderer
			},//使用现有的渲染函数，日期格式化
			{
				title : '毕业日期',
				dataIndex : 'outter',
				editor : {
					xtype : 'date',
					rules : {
						required : true
					},
					validator : function(value, obj) {
						if (obj.enter && value && obj.enter > value) {
							return '毕业日期不能晚于入学日期！'
						}
					}
				},
				renderer : Grid.Format.dateRenderer
			}, {
				title : '备注',
				dataIndex : 'memo',
				width : 200,
				editor : {
					xtype : 'text'
				}
			}

			],
			//默认的数据
			data = [ {
				id : '1',
				school : '武汉第一初级中学',
				enter : 936144000000,
				outter : 993945600000,
				memo : '表现优异，多次评为三好学生'
			}, {
				id : '2',
				school : '武汉第一高级中学',
				enter : 999561600000,
				outter : 1057017600000,
				memo : '表现优异，多次评为三好学生'
			} ], store = new Data.Store({
				data : data
			}), editing = new Grid.Plugins.CellEditing(), grid = new Grid.Grid(
					{
						render : '#grid',
						columns : columns,
						width : 700,
						forceFit : true,
						store : store,
						plugins : [ Grid.Plugins.CheckSelection, editing ],
						tbar : {
							items : [ {
								btnCls : 'button button-small',
								text : '<i class="icon-plus"></i>添加',
								listeners : {
									'click' : addFunction
								}
							}, {
								btnCls : 'button button-small',
								text : '<i class="icon-remove"></i>删除',
								listeners : {
									'click' : delFunction
								}
							} ]
						}

					});
			grid.render();

			function addFunction() {
				var newData = {
					school : '请输入学校名称'
				};
				store.add(newData);
				editing.edit(newData, 'school'); //添加记录后，直接编辑
			}

			function delFunction() {
				var selections = grid.getSelection();
				store.remove(selections);
			}

			var form = new Form.HForm({
				srcNode : '#J_Form'
			});
			form.render();

			form.on('beforesubmit', function() {
				if (!editing.isValid()) {
					return false;
				}
			});

		});
	</script>
<body>
</html>
